$item_size: 52px;

@import 'mixin';
@import 'special';

.toolbar{
    position: relative;
    width: 52px;
    top: 300px;
    left: 300px;
	background-color: #fff;
}

.toolbar_item{
    position: relative;
    display: block;
    width: $item_size;
    height: $item_size;
    margin-bottom: 2px;
	background: url(../../img/toolbar.png) no-repeat;
	background-position:  0 -202px;
	transition: background-position .5s ease-in;

	& .toolbar_item_code{
			width: 160px;
			height: 160px;
			position: absolute;
			bottom: 0;
			right: $item_size;
			background: url(../../img/toolbar.png) -5px -13px;
			@include opacity(0);
			@include transform(0.01);
			@include boxShadow(0 6px 10px 0 #333);
			@include transform-origin(100% 95%);
			@include transition(transform .5s linear,opacity .5s linear);
	}

	&.toolbar_item_advice:hover,&.toolbar_item_weixin:hover{
		.toolbar_item_code{
				@include opacity(1);
				@include transform(1);
			}
	}

	&.toolbar_item_advice{
		@include backgroundPosition(0 -202px,0 -264px);
	}
	
	&.toolbar_item_app{
		@include backgroundPosition(0 -326px,0 -388px);
	}

	&.toolbar_item_top{
		@include backgroundPosition(0 -450px,0 -512px);
	}

	&.toolbar_item_weixin{
		@include backgroundPosition(0 -574px,0 -636px);
	}
}


